<template>
  <div>
    <el-container>
      <el-header>
        <div style="margin-top: 15px;">
          <span style="text-align: left;float: left">页面流量</span>
          <el-row style="text-align: right">
            <el-button size="small">导出数据</el-button>
            <el-button-group>
              <el-button size="small">最近7天</el-button>
              <el-button size="small">最近30天</el-button>
              <el-button size="small">最近90天</el-button>
            </el-button-group>
            <el-date-picker
              size="small"
              v-model="dateRange1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="fetchData1()"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-row>
        </div>
      </el-header>
      <el-main>
        <div
          id="main"
          style="width: 1000px;height:400px;margin-left: 35px"
        ></div>
      </el-main>
    </el-container>

    <el-container>
      <el-header>
        <div style="margin-top: 15px;">
          <span style="text-align: left;float: left">各个端口浏览占比</span>
          <el-row style="text-align: right">
            <el-button size="small">导出数据</el-button>
            <el-button-group>
              <el-button size="small" @click="date(7)">最近7天</el-button>
              <el-button size="small" @click="date(30)">最近30天</el-button>
              <el-button size="small" @click="date(90)">最近90天</el-button>
            </el-button-group>
            <el-date-picker
              size="small"
              v-model="dateRange2"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="fetchData2()"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-row>
        </div>
      </el-header>
      <el-main>
        <div
          id="main1"
          style="width: 1000px;height:400px;margin-left: 35px"
        ></div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      dateRange1: [],
      dateRange2: []
    };
  },
  methods: {
    fetchData1() {
      this.$http
        .post("api/json/tongji/v1/ReportService/getData", {
          header: {
            username: "baiduxbai", //您的用户名
            password: "91740qiLF", //您的密码
            token: "token", //您的token
            account_type: 1
          },
          body: {
            site_id: "http://127.0.0.1/goods/brand/findAll",
            start_date: "20190101",
            end_date: "20190105",
            metrics: "pv_count,visitor_count,ip_count",
            method: "overview/getTimeTrendRpt"
          }
        })
        .then(res => {
          console.log(res);
        });

      const myChart = echarts.init(document.getElementById("main"));

      const option = {
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "浏览次数",
            type: "line",
            stack: "总量",
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: "搜索引擎( UV )",
            type: "line",
            stack: "总量",
            data: [130, 132, 201, 334, 129, 133, 120]
          }
        ],
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["浏览次数", "搜索引擎( UV )"]
        }
      };
      myChart.setOption(option);
    },
    async fetchData2() {
      const categoryReportVo = {
        date1: this.dateRange2[0],
        date2: this.dateRange2[1]
      };
      const myChart1 = echarts.init(document.getElementById("main1"));
      // 查询指定日期的网站来源
      const { data: res } = await this.$http.post(
        `vi/order/statis/findOrderSourceType`,
        categoryReportVo
      );
      const tableName = [];
      // 订单来源：1:web，2：app，3：微信公众号，4：微信小程序  5 H5手机页面
      const tableNum = [];
      for (let i = 0; i < res.data.tbOrder.length; i++) {
        if (res.data.tbOrder[i].sourceType == 1) {
          tableName.push("web");
          tableNum.push({ value: res.data.tbOrder[i].num, name: "web" });
        }
        if (res.data.tbOrder[i].sourceType == 2) {
          tableName.push("app");
          tableNum.push({ value: res.data.tbOrder[i].num, name: "app" });
        }
        if (res.data.tbOrder[i].sourceType == 3) {
          tableName.push("微信公众号");
          tableNum.push({ value: res.data.tbOrder[i].num, name: "微信公众号" });
        }
        if (res.data.tbOrder[i].sourceType == 4) {
          tableName.push("微信小程序");
          tableNum.push({ value: res.data.tbOrder[i].num, name: "微信小程序" });
        }
        if (res.data.tbOrder[i].sourceType == 5) {
          tableName.push("H5手机页面");
          tableNum.push({ value: res.data.tbOrder[i].num, name: "H5手机页面" });
        }
      }

      const option1 = {
        // title: {
        //   text: "某站点用户访问来源",
        //   subtext: "纯属虚构",
        //   left: "center"
        // },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: tableName
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "60%",
            center: ["50%", "60%"],
            data: tableNum,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
      myChart1.setOption(option1);
    },
    date(val) {
      const time = new Date(Date.now() - val * 24 * 60 * 60 * 1000);
      const time2 = new Date(Date.now());
      this.dateRange2 = [];
      this.dateRange2.push(time);
      this.dateRange2.push(time2);
      this.fetchData2();
      this.dateRange2 = [];
    }
  }
};
</script>

<style>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>
